<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello MUI</title>
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../jquery-3.0.0.min.js"></script>
  <script src="../vue.min.js"></script>
  <!--标准mui.css-->
  <link rel="stylesheet" href="../css/mui.min.css">
  <!--App自定义的css-->
  <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
  <style>
    .mui-slider-indicator {
      bottom: 0;
    }

    .mui-slider {
      background-color: #f2f2f2;
    }
  </style>
</head>

<body>
<div id="app">
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">左右拖动分页9宫</h1>
  </header>
  <div class="mui-content">
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        {{info}}
        <div id="Gallery_Toggle" class="mui-switch">
          <div class="mui-switch-handle"></div>
        </div>
      </li>
    </ul>
    <div id="Gallery" class="mui-slider" style="margin-top:15px;">
      <div class="mui-slider-group">
        <div class="mui-slider-item" v-for="(items, key) in testItems" @click="test">
          <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
                v-for="item in items">
              <a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <div class="mui-media-body">{{item}}</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active" v-for="items in testItems"></div>
      </div>
    </div>
    <div class="margin-top mui-slider" data-reactid=".0.0.0.1.0"><div class="mui-slider-group  a" data-reactid=".0.0.0.1.0.0" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms;"><div class="mui-slider-item" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0"><div class="flex-box " data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0"><div class="flex-box-row" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0"><a class="item circle-box" style="width:25%;" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$one-button-door"><div class="circle device device one-button-door purple" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$one-button-door.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$one-button-door.1">一键开门</span></a><a class="item circle-box" style="width:25%;" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$code-door"><div class="circle device code-door" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$code-door.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$code-door.1">密码开门</span></a><a class="item circle-box" style="width:25%;" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$scan-code"><div class="circle device scan-code" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$scan-code.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$scan-code.1">扫码开门</span></a><a class="item circle-box" style="width:25%;" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$code-call"><div class="circle device icon-dianhua" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$code-call.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.0.$code-call.1">一键呼援</span></a></div><div class="flex-box-row" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1"><a class="item circle-box" style="width:25%;" data-cmd="120000434" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1895160"><div class="circle device  purple light4" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1895160.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1895160.1">室内温度计</span></a><a class="item circle-box" style="width:25%;" data-cmd="120000434" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1270436"><div class="circle device  purple light5" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1270436.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1270436.1">室内湿度计</span></a><a class="item circle-box" style="width:25%;" data-cmd="120000235" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1210853"><div class="circle device  purple light6" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1210853.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1210853.1">室内温度计</span></a><a class="item circle-box" style="width:25%;" data-cmd="120000235" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1824169"><div class="circle device  purple light7" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1824169.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:0.0.1.$D160627110533402889d1824169.1">室内湿度计</span></a></div></div></div><div class="mui-slider-item" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1"><div class="flex-box " data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0"><div class="flex-box-row" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0"><a class="item circle-box" style="width:25%;" data-cmd="240000010" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1264598"><div class="circle device  purple light8" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1264598.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1264598.1">陈宗林门磁</span></a><a class="item circle-box" style="width:25%;" data-cmd="725004714" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1713928"><div class="circle device  light9" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1713928.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1713928.1">行政室灯1</span></a><a class="item circle-box" style="width:25%;" data-cmd="725004714" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1143682"><div class="circle device  light10" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1143682.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1143682.1">行政室灯1</span></a><a class="item circle-box" style="width:25%;" data-cmd="725004721" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1732948"><div class="circle device  light11" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1732948.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.0.$D160627110533402889d1732948.1">行政室灯2</span></a></div><div class="flex-box-row" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1"><a class="item circle-box" style="width:25%;" data-cmd="725004721" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1716239"><div class="circle device  light12" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1716239.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1716239.1">行政室灯2</span></a><a class="item circle-box" style="width:25%;" data-cmd="715004702" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1164978"><div class="circle device  light13" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1164978.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1164978.1">财务室灯开</span></a><a class="item circle-box" style="width:25%;" data-cmd="810000562" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1302675"><div class="circle device  light14" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1302675.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1302675.1">马讯插座</span></a><a class="item circle-box" style="width:25%;" data-cmd="810000522" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1691083"><div class="circle device  light15" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1691083.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:1.0.1.$D160627110533402889d1691083.1">插座</span></a></div></div></div><div class="mui-slider-item" data-reactid=".0.0.0.1.0.0.$sliderItems:0:2"><div class="flex-box " data-reactid=".0.0.0.1.0.0.$sliderItems:0:2.0"><div class="flex-box-row" data-reactid=".0.0.0.1.0.0.$sliderItems:0:2.0.0"><a class="item circle-box" style="width:25%;" data-reactid=".0.0.0.1.0.0.$sliderItems:0:2.0.0.$D1606271354118af41b8e765831"><div class="circle device  light16" data-reactid=".0.0.0.1.0.0.$sliderItems:0:2.0.0.$D1606271354118af41b8e765831.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:2.0.0.$D1606271354118af41b8e765831.1">佳可摄像头</span></a><a class="item circle-box" style="width:25%;" data-cmd="510000026" data-reactid=".0.0.0.1.0.0.$sliderItems:0:2.0.0.$D1606291818008af41b8e679198"><div class="circle device undefined iconfont curtain" data-reactid=".0.0.0.1.0.0.$sliderItems:0:2.0.0.$D1606291818008af41b8e679198.0"></div><span class="item-text" data-reactid=".0.0.0.1.0.0.$sliderItems:0:2.0.0.$D1606291818008af41b8e679198.1">测试窗帘子</span></a></div></div></div></div><div class="mui-slider-indicator" data-reactid=".0.0.0.1.0.1"><div class="mui-indicator mui-active" data-reactid=".0.0.0.1.0.1.0"></div><div class="mui-indicator" data-reactid=".0.0.0.1.0.1.1"></div><div class="mui-indicator" data-reactid=".0.0.0.1.0.1.2"></div></div><div class="flex-center loading-box ele-hide" data-reactid=".0.0.0.1.0.2"><span class="mui-spinner" data-reactid=".0.0.0.1.0.2.0"></span></div></div>
    <button @click="add">增加</button>
  </div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        info: "123",
        testItems: {
          item1s: ['name1', 'Email1', 'Chat1', 'location1', 'Search1', 'Phone1', 'Setting1', 'about1', 'more1'],
          item2s: ['name2', 'Email2', 'Chat2', 'location2', 'Search2', 'Phone2', 'Setting2', 'about2', 'more2'],
        },
      }
    },
    methods: {
      add() {
        setTimeout(() => {
          this.testItems = {
            item1s: ['name1', 'Email1', 'Chat1', 'location1', 'Search1', 'Phone1', 'Setting1', 'about1', 'more1'],
            item2s: ['name2', 'Email2', 'Chat2', 'location2', 'Search2', 'Phone2', 'Setting2', 'about2', 'more2'],
            item3s: ['name3', 'Email3', 'Chat3', 'location3', 'Search3', 'Phone3', 'Setting3', 'about3', 'more3']
          };
        }, 2000);
      },
      test() {
        alert('123');
      }
    }
  })
</script>

</html>